<!--
 * @Author: lmh
 * @Date: 2021-08-11 10:38:16
 * @LastEditTime: 2021-08-23 17:44:04
 * @LastEditors: lmh
 * @Description: 导出记录
-->
<template>
  <div class="box">
    <div class="table-box">
      <a-table
        :row-selection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }"
        :columns="columns"
        :data-source="tableData"
        :pagination="{
          total: tableData.length,
          pageSizeOptions:['10','20','30','40','50'],
          'show-size-changer': true,
          'show-quick-jumper': true
        }"
        :scroll="{ y: tableHeight  }"
      >
        <template #filePassword="{record}">
          <span>
            <div v-if="record.showPassword">
              <EyeOutlined @click="record.showPassword=!record.showPassword" />
            </div>
            <div v-else>
              <EyeInvisibleOutlined @click="record.showPassword=!record.showPassword" />
              {{ record.filePassword }}
            </div>
          </span>
        </template>
      </a-table>
    </div>
  </div>
</template>

<script>
import { message, notification } from 'ant-design-vue';
import { reactive, toRefs, onMounted } from 'vue';
import { getList, userList } from '@/service/user';
export default {
  setup() {
    const data = reactive({
      visible: false,
      columns: [
        {
          title: '序号',
          width: 80,
          customRender: text => text.index + 1,
        },
        {
          title: '导出条件',
          dataIndex: 'exportCondition',
        },
        {
          title: '导出数量',
          dataIndex: 'exportNumber',
        },
        {
          title: '导出时间',
          dataIndex: 'exportTime',
        },
        {
          title: '文件下载地址',
          dataIndex: 'fileAddress',
        },
        {
          title: '图片打包文件密码',
          dataIndex: 'filePassword',
          slots: { customRender: 'filePassword' },
        },
        {
          title: '导出状态',
          dataIndex: 'exportStatus',
        },
      ],
      selectedRowKeys: [],
      tableData: [],
      tableHeight: document.documentElement.clientHeight + 'px',
    });

    onMounted(() => {
      data.tableHeight = document.querySelector('.box').clientHeight - 120 + 'px';
      window.onresize = function () {
        data.tableHeight = document.querySelector('.box').clientHeight - 120 + 'px';
      };
    });

    const onSelectChange = selectedRowKeys => {
      console.log('selectedRowKeys changed: ', selectedRowKeys);
      data.selectedRowKeys = selectedRowKeys;
    };

    for (let i = 0; i < 46; i++) {
      data.tableData.push({
        key: i,
        exportCondition: `export condition ${i}`,
        exportNumber: i + Math.floor(Math.random() * 100),
        exportTime: '2021-07-01 15:01:01',
        fileAddress:
          'http://wjj-tongue-long-hua-image-download-test.obs.cn-east-2.myhuaweicloud.com:80/20210823110752669.zip',
        filePassword: '~XPcXRV3Ir',
        exportStatus: '导出完成',
        showPassword: false,
      });
    }

    return {
      onSelectChange,
      ...toRefs(data),
    };
  },

  async mounted() {
    // await userList();
  },

  methods: {},
};
</script>
<style scoped>
.box {
  height: calc(100% - 32px);
}
.table-box {
  margin-top: 20px;
  height: 100%;
}
</style>
